<template>
  <div class="detail">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image.id">
        <img :src="image.url" style="width: 100%; height: 200px" />
      </van-swipe-item>
    </van-swipe>
    <div>
      {{ detail.title }}
      <span>{{ detail.price }}</span>
    </div>
    <!-- 加入购物车部分 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="star" text="收藏" color="black" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="joinToCart(userStore.token, detail.id)"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { getDetails } from "../../api/detail";
import { ref } from "vue";
import useCartStore from "@/store/modules/cart";
import useUserStore from "@/store/modules/user";

const store = useCartStore();
const userStore = useUserStore();
const route = useRoute();
const images = ref([]);
const detail = ref({});

const getDetailsList = async (id: any) => {
  const result = await getDetails(id);
  images.value = result.data.data.detail.photo;
  detail.value = result.data.data.detail;
  console.log(result);
};
getDetailsList(route.query.id);
//定义产品的属性

//点击加入购物车
const joinToCart = async () => {
  const { id, image, price } = detail.value;
  console.log("商品id", id);
  const prod = {
    prodid: id,
    prodPicture: image,
    prodPrice: price,
  };
  
  const result = await store.addToCart(prod);
  console.log("点击加入购物车结果", result);
  console.log("cart数组", store.cart);
};
</script>

<style lang="less" scoped></style>
